<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <div id="app">
            <!--
        	<parent></parent>
        	-->
        </div>
		
		<script src="../../vue.js"></script>
		<script>
		    const {provide, inject, ref, onMounted} = Vue;
		    
            const msgKey = Symbol();
			const helloKey = Symbol();
			const app = Vue.createApp({
			    setup(){
			        const msg = ref('Java无难事');
			        const sayHello = function (name){
			  		    console.log("Hello, " + name);
			  	    }
			  	    // provide方法需要指定一个Symbol类型的key，
			        provide(msgKey, msg);
			        provide(helloKey, sayHello);
			        return {
			            msg
			        }
			    },
				template: '<child/>'
			})
			/*
			app.component('parent', {
			    setup(){
			        const msg = ref('Java无难事');
			        const sayHello = function (name){
			  		    console.log("Hello, " + name);
			  	    }
			  	    // provide方法需要指定一个Symbol类型的key，
			        provide(msgKey, msg);
			        provide(helloKey, sayHello);
			        return {
			            msg
			        }
			    },
				template: '<child/>'
			})
			*/
			
			app.component('child', {
			    setup(){
			        // inject方法接受一个可选的默认值作为第二个参数，
			        // 如果没有提供默认值，并且在provide上下文中未找到该属性，则inject返回undefined。
			        const message = inject(msgKey, ref('VC++深入详解'));
			        const hello = inject(helloKey);
			        onMounted(() => hello('zhangsan'));
			        
			        return{
			            message
			        }
			    },
				// 当自身的数据属性来访问
				template: '<p>{{message}}</p>'
			})
			const vm = app.mount('#app')
		</script>
	</body>
</html>